<template>
  <div class="HeaDer">
   <nav class="navbar">
      <div style="position: absolute;top:15px;left:7px;">
         <a v-if="bool" @click="logouts" href="">
            <img style="width:15%;border-radius: 50%" :src="'http://192.168.13.196:2200/upload/'+user.avatar" alt="">
         </a>
         <a v-else href="#/denglu">
           登录
         </a>
      </div>
      <div class="container">
       <div class="navbar-left row col-lg-12  col-xs-1">
         <a href="/" class="nav-al">
           <img src="/static/logo.png" style="width:75%;" alt="">
         </a>
         <a href="#/sousuo"  class="nav-ar">
            <i class="fa fa-search" style="color:white;font-size:22px;margin-top:3px;"></i>
           <span  style="font-size:18px;color:#fff;position: absolute" >搜索</span>
         </a>
       </div>
       <div class="navbar-mid row">
         <ul class="mid-ul col-lg-12 col-md-10 col-sm-6 col-xs-3" >
           <li>
             <a href="#/">首页</a>
           </li>
           <li>
             <a href="#/topmain">排行榜</a>
           </li>
           <li>
             <a href="">安利墙</a>
           </li>
           <li>
             <a href="">发现</a>
           </li>
           <li>
             <a href="">关注</a>
           </li>
         </ul>
       </div>
       <div class="navbar-rights row">
         <form action="">
              <button class="rights-btn">
                <i class="fa fa-search"></i>
              </button>
              <div class="rights-inp">
                <input @click="ADs" type="text" placeholder="搜索...">
                
              </div>
         </form>
       </div>
       <ul class="navbar-users ">
         <li v-if="bool" class="users-t col-lg-12 col-md-10 col-sm-6 col-xs-3">
           <a @click="AD" href="">
             <i class="fa fa-audio-description fa-2x"></i>
           </a>
         </li>
         <li v-else class="user-img col-lg-12 col-md-10 col-sm-6 col-xs-3">
           <a href="#/zhuce">
             <img src="" alt="">
           </a>
         </li>
         <li  v-if="bool" class="user-img col-lg-12 col-md-10 col-sm-6 col-xs-3">
           <a @click="tuichu" href="">
             <img src="static/3.png" alt="">
           </a>
         </li>
       </ul>
      </div>
      <!-- .................. -->
       <div v-if="displays" class="inputss">
         <section  class="inp-top">
           <p class="intop">
             <span>历史记录</span>
             <span>
               <button type="submit">
                 清空
               </button>
             </span>
           </p>
           <ul class="searchs">
             <li>
               <a href="">1dqwqd</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
             <li>
               <a href="">2dqwd</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
             <li>
               <a href="">3dqwd</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
             <li>
               <a href="">4qdwqwdqw</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
           </ul>
         </section>
         <section class="inp-down">
           <p class="intop">
             <span>历史记录</span>
             <span>
               <button type="submit">
                 清空
               </button>
             </span>
           </p>
           <ul class="searchs">
             <li>
               <a href="">1dqwqd</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
             <li>
               <a href="">2dqwd</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
             <li>
               <a href="">3dqwd</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
             <li>
               <a href="">4qdwqwdqw</a>
               <button type="submit">
                 <i class="fa fa-close"></i>
               </button>
             </li>
           </ul>
         </section>
       </div>
       <div v-if="display" class="simple-resver row">
         <div class="msg-top">
           <ul>
             <li>
               <a href="">回复</a>
             </li>
             <li>
               <a href="">通知</a>
             </li>
             <li>
               <a href="">表态</a>
             </li>
             <li>
               <a href="">关注</a>
             </li>
           </ul>
         </div>
         <div class="msg-main">
           <div class="mmh">
             <ul style="padding:10px 10px;">
               <li style="overflow:hidden;margin-top:10px;">
                 <img style="float:left;width:60px;height:60px;background:red;" src="" alt="">
                 <p style="margin-top:10px;float:left;color:black;margin-left:8px; text-align: left">
                   1231321321
                  </p>
               </li>
             </ul>
             <ul style="padding:10px 10px;">
               <li style="overflow:hidden;margin-top:10px;">
                 <img style="float:left;width:60px;height:60px;background:red;" src="" alt="">
                 <p style="margin-top:10px;float:left;color:black;margin-left:8px; text-align: left">
                   1231321321
                  </p>
               </li>
             </ul>
             <!-- .....被赞..... -->
             <ul style="padding:10px 10px;">
               <li style="overflow:hidden;margin-top:10px;">
                 <img style="float:left;width:60px;height:60px;background:red;" src="" alt="">
                 <p style="margin-top:10px;float:left;color:black;margin-left:8px; text-align: left">
                   1231321321
                  </p>
               </li>
             </ul>
             <!-- 。。。。。。被关注。。。。。。。 -->
             <ul style="padding:10px 10px;">
               <li style="overflow:hidden;margin-top:10px;">
                 <img style="float:left;width:60px;height:60px;background:red;" src="" alt="">
                 <p style="margin-top:10px;float:left;color:black;margin-left:8px; text-align: left">
                   1231321321
                  </p>
               </li>
             </ul>
           </div>
         </div>
          <div class="msg-dowm">
            <p class="msgd-top">
              <span>
                <a href="">
                  <i class="fa fa-bell-o"></i>
                </a>
              </span>
              <span>
                <a href="">
                  <i class="fa fa-cog fa-spin"></i>
                </a>
              </span>
            </p>
            <p class="msgd-down">
              <span>
                <a href="">
                  查看全部
                  <i class="fa fa-forward"></i>
                </a>
              </span>
            </p>
          </div>
       </div>
       <div v-if="tuichus" class="logout">
         <p><a href="">个人中心</a></p>
         <p><a href="">我的关注</a></p>
         <p><a href="">我的收藏</a></p>
         <p><a href="">我的订单</a></p>
         <p><a @click="logouts" href="">退出</a></p>
       </div>
      
   </nav>
  </div>
</template>

<script>
import { Panel } from "vux";
export default {
  data() {
    return {
      bool: false,
      tuichus: false,
      display: false,
      poots: [],
      displays: false,
      num: 0,
      num1: 0,
      user: ""
    };
  },
  components: {
    Panel
  },
  methods: {
    sousuo: function() {
      var numss = this.num1;
      this.num1++;
      // console.log(numss);
      if (numss % 2 == 0) {
        this.sousuos = true;
        numss = 2;
      } else {
        this.sousuos = false;
      }
    },
    onImgError(item, $event) {
      // console.log(item, $event);
    },
    tuichu: function(ev) {
      var nums = this.num;
      ev.preventDefault();
      this.num++;
      console.log(nums);
      if (nums % 2 == 0) {
        this.tuichus = true;
      } else {
        this.tuichus = false;
      }
    },
    AD: function(ev) {
      var nums = this.num;
      ev.preventDefault();
      this.num++;
      console.log(nums);
      if (nums % 2 == 0) {
        this.display = true;
      } else {
        this.display = false;
      }
    },
    ADs: function(ev) {
      ev.preventDefault();
      var numss = this.num1;
      this.num1++;
      console.log(numss);
      if (numss % 2 == 0) {
        this.displays = true;
        numss = 2;
      } else {
        this.displays = false;
      }
    },
    logouts: function(ev) {
      var that = this;
      ev.preventDefault();
      this.$axios
        .get("/top/logout")
        .then(function(data) {
          // console.log(data.data.data);
          if (data.data.data == null) {
            that.bool = false;
            that.tuichus = false;
          }
        })
        .catch(function(err) {
          // console.log(err);
        });
    }
  },
  mounted: function() {
    var that = this;
    this.$axios
      .get("/top/logoing")
      .then(function(data) {
        console.log(data.data.data);
        if (data.data.error == 0) {
          that.bool = true;
          that.user = data.data.data;
        } else {
          that.bool = false;
        }
      })
      .catch(function(err) {
        console.log(err);
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logout {
  position: absolute;
  right: 21.5%;
  background: white;
  color: black;
  padding: 15px 15px;
  z-index: 50;
}
.msg-main p {
  color: black;
}
.msg-main {
  overflow-y: scroll;
  height: 82.5%;
}

.simple-resver .msg-dowm .msgd-down {
  width: 30%;
  float: left;
  /* border: solid 1px #bebebe; */
  height: 44px;
}
.simple-resver .msg-dowm .msgd-down span a {
  color: #aaa;
}
.simple-resver .msg-dowm .msgd-down span a i {
  font-size: 20px;
  line-height: 40px;
  margin-left: 15px;
  color: #d0d0d0;
}
.simple-resver .msg-dowm .msgd-top span a i {
  font-size: 20px;
  line-height: 40px;
  margin-left: 15px;
  color: #d0d0d0;
}
.simple-resver .msg-dowm .msgd-top {
  width: 70%;
  float: left;
  height: 44px;
}
.simple-resver .msg-dowm {
  height: 5%;
  border-top: solid 1px #bebebe;
  position: fixed;
  /* bottom: 541px; */
  top: 444px;
  width: 335px;
  overflow: hidden;
  /* z-index: 22; */
  background: white;
  box-shadow: -1px 1px 5px #aaa;
}
a {
  text-decoration: none;
}
.simple-resver .msg-top ul li a {
  color: #7b7b7b;
}
.simple-resver .msg-top ul li {
  float: left;
  width: 25%;
  text-align: center;
  font-size: 16px;
  height: 100%;
  padding-top: 13px;
}
.simple-resver .msg-top ul li:hover {
  border: dashed 1px #bebebe;
}
.simple-resver .msg-top ul {
  padding: 0 0;
  background: #f0f0f0;
  overflow: hidden;
  height: 100%;
  border-bottom: solid 1px #e0e0e0;
}
.simple-resver .msg-top {
  height: 12%;
}
/* ========================================================= */
.simple-resver {
  width: 335px;
  height: 400px;
  /* border: solid 1px black; */
  position: absolute;
  right: 25%;
  top: 70px;
  background: white;
  box-shadow: -1px -1px 5px #aaa;
  /* display: none; */
}
.searchs li button {
  float: right;
  margin-top: 11px;
  border: none;
  color: #ccc;
  background: transparent;
}
.searchs li a {
  float: left;
  margin-top: 12px;
  text-decoration: none;
}
.searchs li {
  height: 25%;
}
.searchs li:hover {
  background: #b4ebfa;
}
.searchs li:hover button {
  background: #b4ebfa;
}
.searchs {
  padding: 0 0;
  height: 90%;
  margin-top: 20px;
}
.intop {
  color: black;
  float: left;
  width: 100%;
  margin: 2px 1px;
  height: 10%;
}
.intop button {
  color: #12a7b4;
  float: right;
  border: none;
  overflow: hidden;
}
.inp-top {
  /* border: solid 1px #ccc; */
  height: 50%;
  overflow: hidden;
  margin: 5px 5px;
}
.inp-down {
  /* border: solid 1px #ccc; */
  height: 50%;
  overflow: hidden;
  margin: 5px 5px;
}
/* =================================================================================== */
.inputss {
  position: absolute;
  width: 250px;
  height: 400px;
  background: white;
  z-index: 10;
  right: 10.55%;
  top: 60px;
  box-shadow: -1px -1px 5px #aaa;
  /* display: none; */
}
.navbar-users .user-img img {
  width: 50px;
  height: 50px;
  border: solid 3px white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.navbar-users .user-img {
  width: 70%;
  height: 80px;
  float: left;
  margin-top: 30px;
}
.navbar-users .users-t a i {
  color: wheat;
}
.navbar-users .users-t {
  float: left;
  margin-top: 24px;
  margin-left: -25px;
  width: 30%;
}
.navbar-users {
  width: 16%;
  float: left;
  height: 80px;
  overflow: hidden;
  margin-bottom: 0;
}
.rights-inp input {
  width: 100%;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 32px;
  background: #b4ebfa;
  border: none;
  color: #14b9c8;
}
.rights-inp {
  height: 33px;
  width: 80%;
  float: left;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.rights-btn {
  background: #b4ebfa;
  border: none;
  height: 33px;
  margin-left: 10px;
  color: #12a7b4;
  float: left;
  width: 20px;
}
.navbar-rights {
  float: left;
  overflow: hidden;
  width: 15%;
  height: 33px;
  margin-left: 10px;
  margin-top: 22px;
  border-radius: 25px;
  background: #b4ebfa;
  position: relative;
}
.mid-ul li a {
  color: #fff;
  font-size: 19px;
  display: inline-block;
  padding: 25px 0;
  width: 90px;
  text-align: center;
  text-decoration: none;
  /* border: solid 1px black; */
}
.mid-ul li {
  float: left;
  width: 120px;
  height: 82px;
  padding-left: 10px;
  margin-left: 20px;
}
.mid-ul li:hover {
  background: #12a7b4;
}
.mid-ul {
  padding: 0 0;
  float: left;
  overflow: hidden;
  width: 100%;
}
.navbar-mid {
  float: left;
  overflow: hidden;
  height: 80px;
  margin-left: 2px;
  width: 50%;
}
.navbar-left .nav-al {
  display: block;
  float: left;
  width: 65%;
  margin-top: 22px;
}
.navbar-left .nav-ar i {
  position: relative;
  margin-right: 8px;
}
.navbar-left .nav-ar {
  display: block;
  float: left;
  width: 30%;
  margin-top: 25px;
}

.navbar-left {
  float: left;
  width: 247px;
  overflow: hidden;
  height: 80px;
  padding-left: 0;
}
.container {
  /* border: solid 1px black; */
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  height: 80px;
}
.navbar {
  background: #14b9c8;
  margin-bottom: 0;
  border: none;
  color: #fff;
  border-radius: 0;
  margin: 0 0;
  padding: 0 0;
  height: 80px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
}
li {
  list-style: none;
}
</style>